/* eslint-disable react/react-in-jsx-scope */
import React  from 'react';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom'
import Index from './pages/index'
import Video from './pages/Video'
import List from './pages/list'
import Home from './pages/home'
import Workplace from './pages/Workplace.js'
// function Index() {
//     // eslint-disable-next-line react/react-in-jsx-scope
//     return <h2>JSPang.com</h2>;
// }

// function List() {
//     // eslint-disable-next-line react/react-in-jsx-scope
//     return <h2>List-Page</h2>;
// }

// function AppRouter() {
//     return (
//         <Router>
//             <ul>
//                 <li> <Link to='/'>首页</Link></li>
//                 // eslint-disable-next-line react/react-in-jsx-scope
//                 <li> <Link to='/list/123'>列表</Link></li>
//             </ul>
//             {/* exact精准完全匹配，匹配路径一部分不行 */}
//             <Route path='/' exact component={Index}></Route>
//             <Route path='/list/:id'  component={List}></Route>  
//             <Route path='/home/'  component={Home}></Route>  

//         </Router>
//     )
// }
let routeConfig =[
    {path:'/',title:'博客首页',exact:true,component:Index},
    {path:'/video/',title:'视频教程',exact:false,component:Video},
    {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
]



function AppRouter(){
    return(
        <Router>
            <div className='mainDiv'>
                <div className='leftNav'>
                <h3>一级导航</h3>
                <ul>
                    {/* <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="/video/">视频教程</Link> </li>
                    <li><Link to="/workplace/">职场技能</Link> </li> */}
                    {
                        routeConfig.map((item,index)=>{
                            return (<li key={index}><Link to={item.path}>{item.title}</Link></li>)
                        })
                    }
                </ul>
                </div>
                <div className='rightMain'>

                      <Route path='/' exact component={Index}></Route>
                      {/* <Route path='/Video/' component={Video}></Route>
                      <Route path='/home/'  component={Home}></Route> 
                      <Route path='/workplace/'  component={Workplace}></Route> */}
                      {
                          routeConfig.map((item,index)=>{
                            return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                          })

                      }
                </div>
            </div>
        </Router>
    )
}
export default AppRouter;